<template>
  <div class="field-layout" style="border: none;padding-top: 0px;">
	<div class="head" style="border-bottom: 1px solid #333333;0 10px 4px 10px;">
		<span>{{props.name}}</span>
		<el-tooltip
		        class="box-item"
		        effect="dark"
		        content="添加"
		      >
			  <div class="operate" @click.stop="editArrayFieldDialogRef.openDialog(props.specs.items,{},'add')">
			  	<el-icon><Plus /></el-icon>
			  </div>
		</el-tooltip>
	</div>
	<div v-if="isExpand" class="body">
 		<div  v-for=" field in styles" >
			<Vector2DField v-if="field.dataType.type=='v2' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
			<EnumField v-if="field.dataType.type=='enum' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :options="field.dataType.specs" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
			<ImgField v-if="field.dataType.type=='img' && field.display==true " :baseUrl="baseUrl"  :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
			<Vector4DField v-if="field.dataType.type=='v4' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
			<BooleanField v-if="field.dataType.type=='boolean' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :options="field.dataType.specs" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
			<ColorField v-if="field.dataType.type=='color' && field.display==true " :pidentifier="pidentifier"  :identifier="field.identifier" :label="field.name" :value="field.dataType.value" :required="field.required" @onchange="onchange" />
			<StringField v-if="field.dataType.type=='string' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :length="field.dataType.specs.length" :value="field.dataType.value" :required="field.required" :readonly="field.readonly" @onchange="onchange" />
			<NumberField v-if="field.dataType.type=='float' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :min="field.dataType.specs.min" :max="field.dataType.specs.max" :step="field.dataType.specs.step" :value="field.dataType.value" :required="field.required" @onchange="onchange"/>
			<NumberField v-if="field.dataType.type=='int' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :min="field.dataType.specs.min" :max="field.dataType.specs.max" :step="field.dataType.specs.step" :value="field.dataType.value" :required="field.required" @onchange="onchange"/>
			<NumberField v-if="field.dataType.type=='double' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :min="field.dataType.specs.min" :max="field.dataType.specs.max" :step="field.dataType.specs.step" :value="field.dataType.value" :required="field.required" @onchange="onchange"/>
			<StructField v-if="field.dataType.type=='struct' && field.display==true" :pidentifier="pidentifier+'.'+field.identifier" :list="field.dataType.specs" :name="field.name"  @onchange="onchange"/>
		</div> 
	</div>
	<EditArrayFieldDialog ref="editArrayFieldDialogRef" :feilds="props.specs.items" @closeDialog="closed"></EditArrayFieldDialog>
  </div>
</template>
 
<script lang="ts" setup>
	import {
	  Plus
	} from '@element-plus/icons-vue'
	
	import EnumField from "@/components/FormField/EnumField.vue";
	import ImgField from "@/components/FormField/ImgField.vue";
	import Vector2DField from "@/components/FormField/Vector2DField.vue";
	import Vector4DField from "@/components/FormField/Vector4DField.vue";
	import BooleanField from "@/components/FormField/BooleanField.vue";
	import ColorField from "@/components/FormField/ColorField.vue";
	import StringField from "@/components/FormField/StringField.vue";
	import NumberField from "@/components/FormField/NumberField.vue";
	import StructField from "@/components/FormField/StructField.vue";
	import EditArrayFieldDialog from "@/components/FormField/components/EditArrayFieldDialog.vue";
	const editArrayFieldDialogRef=ref();
	
	const props = defineProps({
		baseUrl: {
			type: String,
			default: () => ""
		},
		name: {
			type: String,
			default: () => ""
		},
		pidentifier: {
	  		type: String,
	  		default: () => ""
		},
		list: {
			type: Array,
			default: () => []
		},
		specs: {
			type: Object,
			default: () => {}
		},
	})
	
	const baseUrl=ref<string>('');
	const name=ref<string>('');
	const pidentifier=ref<string>('');
	const styles=ref();
	
	watch(props,() => {
		console.log(props.specs);
			baseUrl.value=props.baseUrl;
			name.value=props.name;
			pidentifier.value=props.pidentifier;
			styles.value=props.specs.items;
		},
	    { immediate: true, deep: true },
	)
	
	const closed=()=>{
	}
	
	const isExpand=ref(false);
	const emits = defineEmits(['onchange'])
	const onchange=(e:any)=>{
		emits('onchange',e)
	}
</script>
<style scoped>
	.field-layout > .head ::before {
	    content: "";
	    width: 2px;
	    height: 12px;
	    background-color: #d5d5d5;
	    position: absolute;
	    left: 0;
	    top: 4px;
	}
	
	.operate{
		display: flex;
		cursor: pointer;
	}
	.operate:hover{
		color: #5555ff;
	}
	.operate ::before {
		 width: 0px !important;
	}
	
	.el-icon::before {
	    content: "";
	}
</style>